import React from 'react'
import { View, Image, ScrollView } from '@tarojs/components'
import { AtSearchBar } from 'taro-ui'
import { useState, useEffect } from 'react'
import RouterProps, { Router } from 'tarojs-router-next'
import Taro from '@tarojs/taro'
import env from '../../store/env.config'

import './goods.scss'

const Goods: React.FC<any> = ({}) => {
  const [searchVal, setSearchVal] = useState('')
  const [recode, setRecode] = useState(Router.getData()?.data?.data?.recode)
  const [userInfo, setUserInfo] = useState({} as any)

  const [goodsList, setGoodsList] = useState([] as any)

  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: (res) => {
        setUserInfo(res.data)
      },
    })
  })

  useEffect(() => {
    let goodsListTmp = [] as any
    recode?.map((item: any) => {
      let template = {
        ...item,
        comments: {
          num: 10,
          proportion: '98%',
        },
        auther: item.userName,
        tags: [],
      }
      goodsListTmp.push(template)
    })
    setGoodsList([...goodsListTmp])
  }, [recode])

  const onSearch = () => {
    Taro.request({
      url: `${env.domain}/goods/list`,

      data: {
        page: 1,
        pageSize: 10000,
        name: searchVal,
        token: userInfo['auth'],
      },
      success: (requestData) => {
        if (requestData.data['code'] === 200) {
          setRecode(requestData.data.data.recode)
        }
      },
    })
  }
  return (
    <View>
      <View>
        <AtSearchBar
          value={searchVal}
          onChange={(val) => setSearchVal(val)}
          onActionClick={onSearch}
          fixed
        />
      </View>
      <View className='content-box'>
        {goodsList.map((item, index) => {
          return (
            <View
              key={index}
              className='at-row goods'
              onClick={() => {
                RouterProps.navigate(
                  { url: '/pages/detail/detail' },
                  { data: { ...item, current: 0 } }
                )
              }}
            >
              <View className='at-col-4'>
                <Image className='goods-image' src={item.cover} />
              </View>
              <View className='at-col-8 detail-box'>
                <View className='goods-title-text'>《{item.name}》</View>
                <View className='goods-remark good-remark-text'>
                  {item.remark}
                </View>

                <View
                  className='at-row at-row--wrap good-remark-text'
                  style={{ height: '20px' }}
                >
                  {item.tags.map((tag, i) => (
                    <View key={i} className='tag-box at-col-3'>
                      {tag}
                    </View>
                  ))}
                </View>
                <View className='price-text'>¥{item.price}</View>
                <View className='good-remark-text at-row'>
                  <View className='at-col'>
                    {item.comments.num > 999 ? 1000 + '+' : item.comments.num}
                    条评论
                  </View>
                  <View className='at-col'>{item.comments.proportion}好评</View>
                </View>
                <View className='good-remark-text auther-box '>
                  {item.auther}
                </View>
              </View>
            </View>
          )
        })}
      </View>
    </View>
  )
}

export default Goods
